<script setup lang="ts">
import { computed, toRaw, unref, watch } from "vue";

import { useSimpleLocale } from "../../composables";
import { VbenExpandableArrow } from "../../shadcn-ui";
import { cn, isFunction, triggerWindowResize } from "../../shared/utils";

import { COMPONENT_MAP } from "../config";
import { injectFormProps } from "../use-form-context";

const { $t } = useSimpleLocale();

const [rootProps, form] = injectFormProps();

const collapsed = defineModel({ default: false });

const resetButtonOptions = computed(() => {
  return {
    content: `${$t.value("reset")}`,
    show: true,
    ...unref(rootProps).resetButtonOptions
  };
});

const submitButtonOptions = computed(() => {
  return {
    content: `${$t.value("submit")}`,
    show: true,
    ...unref(rootProps).submitButtonOptions
  };
});

// const isQueryForm = computed(() => {
//   return !!unref(rootProps).showCollapseButton;
// });

const queryFormStyle = computed(() => {
  if (!unref(rootProps).actionWrapperClass) {
    return {
      "grid-column": `-2 / -1`,
      marginLeft: "auto"
    };
  }

  return {};
});

async function handleSubmit(e: Event) {
  e?.preventDefault();
  e?.stopPropagation();
  const { valid } = await form.validate();
  if (!valid) {
    return;
  }

  const values = toRaw(await unref(rootProps).formApi?.getValues());
  await unref(rootProps).handleSubmit?.(values);
}

async function handleReset(e: Event) {
  e?.preventDefault();
  e?.stopPropagation();
  const props = unref(rootProps);

  const values = toRaw(props.formApi?.getValues());

  if (isFunction(props.handleReset)) {
    await props.handleReset?.(values);
  } else {
    form.resetForm();
  }
}

watch(
  () => collapsed.value,
  () => {
    const props = unref(rootProps);
    if (props.collapseTriggerResize) {
      triggerWindowResize();
    }
  }
);

defineExpose({
  handleReset,
  handleSubmit
});
</script>
<template>
  <div :class="cn('col-span-full w-full text-right', rootProps.compact ? 'pb-2' : 'pb-6', rootProps.actionWrapperClass)" :style="queryFormStyle">
    <template v-if="rootProps.actionButtonsReverse">
      <!-- 提交按钮前 -->
      <slot name="submit-before"></slot>

      <component :is="COMPONENT_MAP.PrimaryButton" v-if="submitButtonOptions.show" class="ml-3" type="button" v-bind="submitButtonOptions" @click="handleSubmit">
        {{ submitButtonOptions.content }}
      </component>
    </template>

    <!-- 重置按钮前 -->
    <slot name="reset-before"></slot>

    <component :is="COMPONENT_MAP.DefaultButton" v-if="resetButtonOptions.show" class="ml-3" type="button" v-bind="resetButtonOptions" @click="handleReset">
      {{ resetButtonOptions.content }}
    </component>

    <template v-if="!rootProps.actionButtonsReverse">
      <!-- 提交按钮前 -->
      <slot name="submit-before"></slot>

      <component :is="COMPONENT_MAP.PrimaryButton" v-if="submitButtonOptions.show" class="ml-3" type="button" v-bind="submitButtonOptions" @click="handleSubmit">
        {{ submitButtonOptions.content }}
      </component>
    </template>

    <!-- 展开按钮前 -->
    <slot name="expand-before"></slot>

    <VbenExpandableArrow v-if="rootProps.showCollapseButton" v-model:model-value="collapsed" class="ml-2">
      <span>{{ collapsed ? $t("expand") : $t("collapse") }}</span>
    </VbenExpandableArrow>

    <!-- 展开按钮后 -->
    <slot name="expand-after"></slot>
  </div>
</template>
